<template>
  <view class="container">
    <!-- 步骤指示器 -->
    <view class="steps-container">
      <u-steps :current="currentStep" active-color="#2979ff">
        <u-steps-item title="选择包装"></u-steps-item>
        <u-steps-item title="上传Logo"></u-steps-item>
        <u-steps-item title="选择产品"></u-steps-item>
        <u-steps-item title="邮寄方式"></u-steps-item>
      </u-steps>
    </view>

    <!-- 步骤内容区域 -->
    <view class="content">
      <!-- 第一步：选择包装 -->
      <view v-show="currentStep === 0" class="step-content">
        <view class="title">选择包装样式</view>
        <view class="packaging-list">
          <view 
            v-for="(item, index) in packagingList" 
            :key="index" 
            class="packaging-item"
            :class="{ active: selectedPackaging === index }"
            @click="selectPackaging(index)"
          >
            <image :src="item.image" mode="widthFix" class="packaging-image"></image>
            <!-- <text class="packaging-name">{{ item.name }}</text> -->
          </view>
        </view>
      </view>

      <!-- 第二步：上传Logo -->
      <view v-show="currentStep === 1" class="step-content">
        <view class="title">上传Logo（可选）</view>
        <view class="upload-area">
          <u-upload
            :fileList="logoList"
            @afterRead="afterRead"
            @delete="deleteLogo"
            :maxCount="1"
            :previewFullImage="true"
          >
            <view class="upload-btn">
              <u-icon name="plus" size="40" color="#c0c4cc"></u-icon>
              <text class="upload-text">上传Logo</text>
            </view>
          </u-upload>
        </view>
        <view class="skip-btn" @click="skipLogoUpload">
          <text>跳过此步骤</text>
        </view>
      </view>

      <!-- 第三步：选择产品 -->
      <view v-show="currentStep === 2" class="step-content">
        <view class="title">选择仓库产品及数量</view>
        <view class="product-list">
          <view class="product-item" v-for="(product, index) in productList" :key="index">
            <view class="product-info">
              <image :src="product.image" class="product-image"></image>
              <view class="product-details">
                <text class="product-name">{{ product.name }}</text>
                <text class="product-price">150克</text>
              </view>
            </view>
            <view class="quantity-control">
              <u-number-box
                v-model="product.quantity"
                :min="0"
                :max="1000"
                integer
                :step="10"
              ></u-number-box>
              <text class="unit">份</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 第四步：选择邮寄方式 -->
      <view v-show="currentStep === 3" class="step-content">
        <view class="title">选择邮寄地址及快递</view>
        
        <!-- 地址选择 -->
        <view class="address-section">
          <view class="section-title">收货地址</view>
          <view class="address-card" @click="chooseAddress">
            <view v-if="selectedAddress">
              <view class="address-info">
                <text class="recipient">{{ selectedAddress.userName }} {{ selectedAddress.telNumber }}</text>
                <text class="address-detail">{{ selectedAddress.provinceName }}{{ selectedAddress.cityName }}{{ selectedAddress.countyName }}{{ selectedAddress.detailInfo }}</text>
              </view>
            </view>
            <view v-else class="no-address">
              <u-icon name="map" size="24" color="#c0c4cc"></u-icon>
              <text class="no-address-text">选择收货地址</text>
            </view>
            <u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
          </view>
        </view>
        
        <!-- 快递公司选择 -->
        <view class="delivery-section">
          <view class="section-title">快递公司</view>
          <u-radio-group v-model="deliveryCompany" placement="column">
            <view class="delivery-option">
              <u-radio 
                name="顺丰" 
                label="顺丰快递" 
                active-color="#2979ff"
              ></u-radio>
            </view>
            <view class="delivery-option">
              <u-radio 
                name="申通" 
                label="申通快递" 
                active-color="#2979ff"
              ></u-radio>
            </view>
          </u-radio-group>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="action-buttons">
      <u-button 
        v-if="currentStep > 0" 
        type="default" 
        @click="prevStep"
        class="prev-btn"
      >
        上一步
      </u-button>
      <u-button 
        :type="currentStep === 3 ? 'primary' : 'primary'" 
        @click="nextStep"
        class="next-btn"
      >
        {{ currentStep === 3 ? '提交订单' : '下一步' }}
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      selectedPackaging: 0,
      logoList: [],
      deliveryCompany: '顺丰',
      selectedAddress: null,
      packagingList: [
        {
          id: 1,
          name: '经典礼盒',
          image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01TUgBh11EXO02RauOo_%21%213022050361-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1763904644&t=58f0409da88819e7da133a240f10bf1c'
        },
        {
          id: 2,
          name: '简约包装',
          image: 'https://img.pddpic.com/garner-api-new/1c300ab1e591301b626e7c04388e8593.jpeg'
        },
        {
          id: 3,
          name: '豪华礼盒',
          image: 'https://t13.baidu.com/it/u=2645232100,742707714&fm=224&app=112&f=JPEG?w=500&h=500'
        },
        {
          id: 4,
          name: '环保包装',
          image: 'https://img.yzcdn.cn/upload_files/2022/07/08/Fl113MUF-zrKj5XdZBNf-k4hm_mL.jpg?imageView2/2/w/750/h/0/q/75/format/jpg'
        }
      ],
      productList: [
        {
          id: 1,
          name: '3年皮',
          price: 1.5,
          quantity: 0,
          image: '/static/product.jpg'
        },
        {
          id: 2,
          name: '5年皮',
          price: 2.0,
          quantity: 0,
          image: '/static/product.jpg'
        }
      ]
    }
  },
  methods: {
    // 选择包装
    selectPackaging(index) {
      this.selectedPackaging = index
    },
    
    // 上传Logo
    afterRead(event) {
      // 实际开发中这里应该上传到服务器
      const file = event.file
      this.logoList.push({
        url: file.url,
        // 其他文件信息
      })
    },
    
    // 删除Logo
    deleteLogo(index) {
      this.logoList.splice(index, 1)
    },
    
    // 跳过Logo上传
    skipLogoUpload() {
      this.currentStep = 2
    },
    
    // 选择地址
    chooseAddress() {
      // 微信小程序中调用选择地址API
      uni.chooseAddress({
        success: (res) => {
          this.selectedAddress = res
        },
        fail: (err) => {
          console.log('选择地址失败', err)
          // 在H5或其他平台可以模拟数据
          this.selectedAddress = {
            userName: '张三',
            telNumber: '138****8888',
            provinceName: '广东省',
            cityName: '深圳市',
            countyName: '南山区',
            detailInfo: '科技园南区'
          }
        }
      })
    },
    
    // 上一步
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    
    // 下一步
    nextStep() {
      if (this.currentStep < 3) {
        this.currentStep++
      } else {
        // 提交订单
		uni.showModal({
			title: '',
			content: '您仓库还没有库存，可以先去购买！',
			showCancel: false,
			success: () => {
				
			}
		})
        // this.submitOrder()
      }
    },
    
    // 提交订单
    submitOrder() {
      // 收集所有数据
      const orderData = {
        packaging: this.packagingList[this.selectedPackaging],
        logo: this.logoList.length > 0 ? this.logoList[0] : null,
        products: this.productList.filter(item => item.quantity > 0),
        address: this.selectedAddress,
        delivery: this.deliveryCompany
      }
      
      console.log('订单数据:', orderData)
      
      // 实际开发中这里应该调用API提交订单
      uni.showToast({
        title: '订单提交成功',
        icon: 'success'
      })
      
      // 跳转到订单详情或首页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.steps-container {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.content {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 120rpx;
}

.step-content {
  min-height: 500rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}

/* 包装选择样式 */
.packaging-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.packaging-item {
  width: 48%;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  border: 2rpx solid #e4e7ed;
  transition: all 0.3s;
  
  &.active {
    border-color: #2979ff;
    box-shadow: 0 0 10rpx rgba(41, 121, 255, 0.3);
  }
}

.packaging-image {
  width: 100%;
  height: auto;
}

.packaging-name {
  display: block;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
}

/* 上传区域样式 */
.upload-area {
  margin-bottom: 40rpx;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #c0c4cc;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-text {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #909399;
}

.skip-btn {
  text-align: center;
  color: #2979ff;
  font-size: 28rpx;
  padding: 20rpx 0;
}

/* 产品选择样式 */
.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.product-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.product-details {
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 24rpx;
  color: #909399;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.unit {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #606266;
}

/* 地址选择样式 */
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 30rpx 0 20rpx;
  color: #333;
}

.address-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.address-info {
  display: flex;
  flex-direction: column;
}

.recipient {
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.address-detail {
  font-size: 26rpx;
  color: #606266;
}

.no-address {
  display: flex;
  align-items: center;
  color: #c0c4cc;
}

.no-address-text {
  margin-left: 10rpx;
  font-size: 28rpx;
}

/* 快递选择样式 */
.delivery-option {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 底部按钮样式 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #e4e7ed;
}

.prev-btn {
  flex: 1;
  margin-right: 20rpx;
}

.next-btn {
  flex: 2;
}
</style>